<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.11.3.js"></script>
    <link href="style/css.css" rel="stylesheet">
</head>
<body>
<div class="shadow">
    <img id="close"  src="close.jpg">
<img id="photo" src="photo/1.jpg">
    <div id="navigator">
        <span id="prev"><< 上一幅</span>&nbsp&nbsp&nbsp<span id="next">下一幅 >></span>
    </div>
</div>

<script>
    (function() {


    function ee(idx, node) {
        $("#photo").attr({"src": "photo/" + (idx + 1) + ".jpg"});


        var h = node.height();
        var w = node.width();
        if (h > w) {
            $("#photo").removeClass("ls2");
            $("#photo").addClass("pt2");
        } else {
            $("#photo").removeClass("pt2");
            $("#photo").addClass("ls2");
        }
    }

    $(function () {

        for (var i = 1; i <= 30; i++) {
            $("body").append("<div class='box'><img  src='photo/thumb/" + i + ".jpg'/></div>");


        }

        $("img").not(".shadow img").click(function () {

            var idx = $("img").not(".shadow img").index(this);
            ee(idx, $(this));
            $(".shadow").show();
            currentidx = idx;

        })

        $("#close").click(function () {
            $(".shadow").hide();

        })
        $("#next").click(function () {
            currentidx = (currentidx + 1) % 30;

            ee(currentidx, $("img").not(".shadow img").eq(currentidx));
        })
        $("#prev").click(function () {
            currentidx = (currentidx + 29) % 30;

            ee(currentidx, $("img").not(".shadow img").eq(currentidx));
        })

    })
    $(window).load(function () {
        var imgs = $("img").not(".shadow img");
        for (var i = 0; i < 30; i++) {
            var h = imgs.eq(i).height();
            var w = imgs.eq(i).width();

            if (h > w) {
                $(".box").eq(i).addClass("pt");

            } else {
                $(".box").eq(i).addClass("ls");

            }
        }

    })

})();
</script>


</body>
</html>